<template>
  <view class="policy" id="policy">
    <view class="policy_choice policy_choiceTop" v-show="showHide">
      <view class="policy_choice_content"> 122 </view>
    </view>
    <view class="policy_top">
      <image
        src="../../static/returnimg.png"
        mode=""
        class="policy_top_imgs"
        @tap="navigateBackEv()"
      ></image>
      <view class="policy_top_input">
        <input
          type="text"
          placeholder="请输入公司名称"
          v-model="inputValue"
          @confirm="search()"
        />
        <image src="../../static/search.png" mode="" @tap="search()"></image>
      </view>
    </view>
    <view class="policy_choice" id="policy_choice">
      <view class="policy_choice_content"> </view>
    </view>
    <view class="policy_content">
      <view
        class="policy_content_content"
        v-for="item in allData"
        :key="item.id"
        @tap="jumpDetails(item.id)"
      >
        <h3>{{ item.title }}</h3>
        <view class="policy_content_content_bottom">
          <p>{{ item.departmentName }}</p>
          <text>{{ item.releaseTime }}</text>
        </view>
      </view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 滚动显示隐藏
      showHide: false,
      // 加载下一页
      loadJudge: true,
      // 当前加载页
      pageValue: 1,
      // 所有数据
      allData: [],
      // 关键字
      keywordValue: null,
      // input绑定值
      inputValue: "",
    };
  },
  onShow() {
    if (document.getElementById("policy") != null) {
      window.addEventListener("scroll", this.scrollEvent);
    }
  },
  onLoad() {
    window.addEventListener("scroll", this.scrollEvent);
    this.request();
  },
  methods: {
    // 返回上一级
    navigateBackEv() {
      window.removeEventListener("scroll", this.scrollEvent);
      window.history.go(-1);
    },
    // 滚动事件
    scrollEvent() {
      var that = this;
      // 滚动显示隐藏
      if (
        document.documentElement.scrollTop >
        document.getElementById("policy_choice").offsetTop
      ) {
        that.showHide = true;
      } else {
        that.showHide = false;
      }
      // 加载下一页
      if (
        document.documentElement.scrollTop +
          document.documentElement.offsetHeight +
          20 >
          document.getElementById("policy").offsetHeight &&
        that.loadJudge == true
      ) {
        that.loadJudge = false;
        that.pageValue = that.pageValue + 1;
        that.request();
      }
    },
    // 数据请求
    request() {
      var that = this;
      that
        .$get("/bmj-api/api/pms/pmsPolicyNoticeInfo/list", {
          pageNo: that.pageValue,
          pageSize: 10,
          province: null,
          city: null,
          area: null,
          keyword: that.keywordValue,
        })
        .then((res) => {
          that.loadJudge = true;
          if (res.success) {
            var data = res.result.records;
            if (data.length > 0) {
              for (let i = 0; i < data.length; i++) {
                that.allData.push(data[i]);
              }
            } else {
              alert("加载失败");
            }
          } else {
            alert("加载失败");
          }
        });
    },
    // 点击搜索
    search() {
      var that = this;
      if (that.inputValue == "" || that.inputValue == undefined) {
        that.keywordValue = null;
      } else {
        that.keywordValue = that.inputValue;
      }
      that.pageValue = 1;
      that.allData = [];
      that.request();
    },
    // 跳转至详情
    jumpDetails(id) {
      this.loadJudge = true;
      window.removeEventListener("scroll", this.scrollEvent);
      uni.navigateTo({
        url: "/pages/policyChecking/policyDetails?id=" + id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.policy {
  width: 100vw;
}
.policy_top {
  width: 750rpx;
  height: 120rpx;
  background-color: #2862ad;
  overflow: hidden;
}
.policy_top_imgs {
  width: 18rpx;
  height: 34rpx;
  padding: 44rpx 0 42rpx 34rpx;
  float: left;
  box-sizing: content-box;
}
.policy_top_input {
  float: left;
  width: 600rpx;
  height: 80rpx;
  background: #ffffff;
  border-radius: 8rpx;
  margin: 20rpx 0 20rpx 44rpx;
  overflow: hidden;
}
.policy_top_input input {
  font-size: 28rpx;
  color: #333;
  padding-left: 20rpx;
  box-sizing: border-box;
  width: calc(100% - 80rpx);
  float: left;
  height: 100%;
}
.policy_top_input image {
  float: left;
  width: 32rpx;
  height: 32rpx;
  margin: 24rpx 0 24rpx 0;
}
.policy_choiceTop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.policy_choice {
  width: 750rpx;
  height: 120rpx;
  overflow: hidden;
  background-color: #f8f9fd;
}
.policy_choice_content {
  float: left;
  width: 160rpx;
  height: 56rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin: 32rpx 0 32rpx 30rpx;
}
.policy_content {
  background: #f8f9fd;
  overflow: hidden;
  padding-top: 20rpx;
}
.policy_content_content {
  width: 690rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  padding: 40rpx 40rpx;
  box-sizing: border-box;
}
.policy_content_content > h3 {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
}
.policy_content_content_bottom {
  margin-top: 28rpx;
  overflow: hidden;
}
.policy_content_content_bottom > p {
  float: left;
  display: inline-block;
  font-size: 26rpx;
  line-height: 36rpx;
  height: 36rpx;
  font-weight: 400rpx;
  color: #333333;
}
.policy_content_content_bottom > text {
  float: right;
  font-size: 22rpx;
  line-height: 36rpx;
  height: 36rpx;
  color: #aaa;
}
</style>
